<template>
    <el-drawer
        title="查看店铺充值记录"
        direction="rtl"
        :before-close="handleClose"
        :visible.sync="_visible" 
        size="70%">
        <div class="container" style="padding: 0 20px">
            <div class="search-list">
                <el-table 
                    border
                    header-cell-class-name="hdCellStyle" 
                    :data="dataList">
                    <el-table-column 
                        prop="id" 
                        label="日志ID"
                        width="80"
                        align="center">
                    </el-table-column>
                    <el-table-column 
                        label="经销商名称"
                        min-width="150"
                        align="center"
                        prop="store_name"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column 
                        label="充值金额(￥)"
                        min-width="100"
                        align="center"
                        prop="recharge_amount">
                        <template #default="{row}">
                            <span v-if="parseFloat(row.recharge_amount)>0">{{row.recharge_amount}}</span>
                            <span class="danger" v-else>{{row.recharge_amount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column 
                        label="剩余金额(￥)"
                        min-width="100"
                        align="center"
                        prop="surplus_amount">
                        <template #default="{row}">
                            <span v-if="parseFloat(row.surplus_amount)>10">{{row.surplus_amount}}</span>
                            <span class="danger" v-else>{{row.surplus_amount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column 
                        label="备注"
                        min-width="100"
                        align="center"
                        prop="remarks">
                        <template #default="{row}">
                            {{row.remarks ? row.remarks : '--'}}
                        </template>
                    </el-table-column>
                    <el-table-column 
                        label="时间"
                        min-width="150"
                        align="center"
                        prop="addtime">
                    </el-table-column>
                </el-table>
            </div>
            <div class="bottom flex-item">
                <div class="btn-group"></div>
                <div class="paginationOne">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageArr.curpage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageArr.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageArr.total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-drawer>
</template>
<script>
export default {
    name: 'Records',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        store_id: {
            type: Number,
            default: 0
        },
        updateVisible: Function
    },
    data() {
        return {
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 20,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
        }
    },
    methods: {
        getData(action = null) {
            let datas = {
                pagesize: this.pageArr.pageSize,
                curpage: this.pageArr.curpage,
                store_id: this.store_id // 店铺ID
            }
            this.$http.post('/admin/store/index.php?act=smsRecharge&op=smsLogList', datas).then(res => {
                if(res.code == 1) {
                    this.dataList = res.data || []
                    this.pageArr.total = parseInt(res.show_page.TotalNum) || 0
                }
            })
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        handleSortChange({ column, prop, order }) {
            this.sort.prop = prop
            this.sort.order = order
            this.pageArr.curpage = 1;
            this.getData()
        },
        handleClose(done) {
            done()
            this.$emit('updateVisible')
            this.dataList = []
            this.pageArr.total = 0
        }
    },
    computed: {
        _visible: {
            get() {
                return this.visible
            },
            set(val) {
                // 保留setter，但不需要任何赋值操作
            }
        }
    },
    watch: {
        store_id(val, oldVal) {
            if(val > 0) {
                this.getData()
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.el-drawer__wrapper {
    /deep/ .el-drawer__header {
        margin-bottom: 20px;
    }
    /deep/.el-dialog__close{
        transition: all .3s;
        &:hover {
            transform: rotate(90deg);
        }
    }
}
.container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    display: -webkit-flex;
    justify-content: space-between;
    overflow: hidden;
    .search-list {
        flex-grow: 1;
        height: 100px;
        /deep/.el-table {
            height: 100%;
            .el-table__body-wrapper, .el-table__fixed-body-wrapper {
                height: calc(100% - 35px)!important;
                overflow-y: auto;
            }
            &.el-table--mini th {
                padding: 6px 0;
            }
            .cell { line-height: 22px; }
            .caret-wrapper {
                height: 27px;
            }
            .sort-caret.ascending {
                top: 1px
            }
            .sort-caret.descending {
                bottom: 4px;
            }
            .el-table__header-wrapper {
                background: #F5F7FA;
            }
            .el-table__header [name="gutter"] {
                width: 7px;
            }
            //滚动条的宽度
            .el-table__body-wrapper {
                &::-webkit-scrollbar { 
                    width: 7px;
                    height: 7px;
                }
                //滚动条的滑块
                &::-webkit-scrollbar-thumb {
                    cursor: pointer;
                    background-color: rgba(144, 147, 153, 0.3);
                    border-radius: 7px;
                }
            }
            .danger { color: #F56C6C; }
        }
    }
}
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>